set_Page();

//页面的点击事件  事件委托
$('.container').click(function (e) {
  const cartArr = JSON.parse(window.localStorage.cart);
  if (e.target.getAttribute('name') === 'all') {
    cartArr.forEach((item) => {
      item.buy = e.target.checked;
    });
  } else if (e.target.getAttribute('name') === 'other') {
    cartArr[e.target.getAttribute('index') - 0].buy = e.target.checked;
  } else if (e.target.getAttribute('name') === '-') {
    cartArr[e.target.getAttribute('index') - 0].num--;
  } else if (e.target.getAttribute('name') === '+') {
    cartArr[e.target.getAttribute('index') - 0].num++;
  } else if (e.target.getAttribute('name') === 'del') {
    cartArr.splice(e.target.getAttribute('index') - 0, 1);
    if (window.confirm('您确定要删除吗')) {
      cartArr.splice(e.target.getAttribute('index') - 0, 1);
    }
  }
  window.localStorage.cart = JSON.stringify(cartArr);
  set_Page();
});
const cartArr = JSON.parse(window.localStorage.cart);

console.log(cartArr);

function set_Page() {
  let type = 0;
  let the_Number = 0;
  let price = 0;

  let all = true;
  let str = `
    <div class="panel panel-info">
        <div class="panel-body bg-info">
            <div class="checkbox">
                <label for="all_check">
                <input name="all" type="checkbox" id="all_check" value="" />
                全选
                </label>
            </div>
        </div>
        <div class="panel-footer">
            <ul class="cart-list">
    `;

  //账号无购物车内容要先创建购物车
  if (window.localStorage.cart === undefined) {
    $('.container').html(`<p>您还没有添加购物车内容</p>`);
  } else {
    const cartArr = JSON.parse(window.localStorage.cart);

    if (cartArr.length === 0) {
      $('.container').html(`<p>您的购物车内容已被清空</p>`);
      return;
    }

    cartArr.forEach((item, key) => {
      if (item.buy) {
        type++;
        the_Number += item.num;
        price += item.num * item.goods_price;
      } else {
        all = false;
      }

      str += `
            <li class="cart-item">
              <div class="left">
                <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}/>
              </div>
              <div class="right">
                <div class="media">
                  <div class="media-left">
                    <a href="#">
                      <img
                        class="media-object"
                        src=${item.goods_small_logo}
                        alt="..."
                      />
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">
                      商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述
                    </h4>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <div class="btn-group pull-right" role="group" aria-label="...">
                      <button name="-" index="${key}" ${
        item.num <= 1 ? 'disabled' : ''
      } type="button" class="btn btn-default">-</button>
                      <button type="button" class="btn btn-default" disabled>${item.num}</button>
                      <button name="+" index="${key}" ${
        item.num >= item.goods_number ? 'disabled' : ''
      } type="button" class="btn btn-default">+</button>
                    </div>
                    <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>
                  </div>
                </div>
              </div>
            </li>           
            `;
    });

    str += `
          </ul>
        </div>

        <h1>您一共买了${type}种产品</h1>
        <h1>您一共买了${the_Number}件产品</h1>
        <h1>您一共买了${price.toFixed(2)}元产品</h1>
      </div>
    `;
    $('.container').html(str);
    $('[name="all"]').prop('checked', all);
  }
}
